<template>
  <el-dialog title="管理引用文件" :visible.sync="dialogVisible" :before-close="handleClose">
    <div class="wrapper">
      <el-table :data="parsed" class="ins-table" height="560px">
        <el-table-column prop="refcontent" label="编号" width="120">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.source"
              v-model="scope.row.refcontent"
              size="small"
              placeholder="请输入编号"
            ></el-input>
            <template v-else>{{ scope.row.refcontent }}</template>
          </template>
        </el-table-column>
        <el-table-column prop="refname" label="名称">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.source"
              v-model="scope.row.refname"
              size="small"
              placeholder="请输入名称"
            ></el-input>
            <template v-else>{{ scope.row.refname }}</template>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="refdate" label="年份" width="60">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.source"
              v-model="scope.row.refdate"
              size="small"
              placeholder="请输入年份"
            ></el-input>
            <template v-else>{{ scope.row.refdate }}</template>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="100">
          <template slot-scope="scope"
            ><el-button size="mini" type="text" :disabled="scope.$index === 0" @click="moveup(parsed, scope.$index)"
              >上移</el-button
            >
            <el-button
              size="mini"
              type="text"
              :disabled="scope.$index === parsed.length - 1"
              @click="movedown(parsed, scope.$index)"
              >下移</el-button
            ></template
          >
        </el-table-column>
      </el-table>
      <!-- </div> -->
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import { moveup, movedown } from '@/utils/helpers'
import { getSortedRefs } from '@/utils/events/updateRef'

export default {
  name: 'ManageRefDialog',
  data() {
    return {
      parsed: [],
      dialogVisible: false
    }
  },
  methods: {
    show() {
      this.parsed = getSortedRefs()
      this.dialogVisible = true
    },
    moveup,
    movedown,
    async handleConfirm() {
      tinymce.activeEditor.fire('updateRef', { list: this.parsed })
      this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
}
.ins-table {
  width: 100%;
}
::v-deep .el-dialog {
  min-width: 800px;
}
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
::v-deep .el-dialog__footer {
  padding: 0 20px 10px;
}
::v-deep .el-table .el-table__cell form {
  margin-left: 80px;
}
::v-deep .el-table .el-table__cell form > div {
  margin-bottom: 0;
}
::v-deep .el-table .el-table__cell form > div > label {
  font-weight: bold;
}
.half {
  width: 49.5%;
}
.center {
  border: 1px solid #ccc;
  height: calc(70vh);
  margin: auto 10px;
}
.row {
  display: flex;
}
.row > div {
  padding: 0 1px;
  margin-bottom: 0;
}
.row > div:nth-child(3),
.row > div:nth-child(4) {
  flex-grow: 1;
}
.row > div:nth-child(1),
.row > div:nth-child(2),
.row > div:nth-child(5),
.row > div:nth-child(6),
.row > div:last-child {
  width: 200px;
}
</style>
